<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>性能优化_url输入到页面加载</title>
  <!-- https://zhuanlan.zhihu.com/p/113864878?from_voters_page=true -->
  <style>
    *,
    *::after,
    *::before {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    :root {
      min-height: 100vh;
    }

    :root:focus-within {
      scroll-behavior: smooth;
    }

    body {
      min-height: inherit;
    }
  </style>
</head>

<body>
  <div></div>
</body>
<script>
  "use strict"; {
    /* 
    本地缓存:
      强缓存: 是指浏览器在加载资源时，根据请求头的 expires 和 cache-control 判断是否命中客户端缓存
      协商缓存: 是指浏览器会先发送一个请求到服务器，通过 last-modified 和 etag 验证资源是否命中客户端缓存
    DNS查询:
      DNS查询走缓存，浏览器提供了DNS预获取的接口，打开浏览器或webView的同时就进行配置
    http请求
      最大的瓶颈点来源于请求阻塞
        请求阻塞:浏览器为保证访问速度会默认对同一域下的资源保持一定的连接数，请求过多就会进行阻塞
    服务端处理
      gzip压缩资源的下载速度会很多
      service worker 是浏览器的一个高级属性，拦截和处理网络数据请求
    数据缓存
    重定向
      服务端发挥302重定向
      META标签实现重定向
      通过javascript的window.location实现的重定向
      上面这三种重定向都会引发新的DNS查询
    */
  };
</script>

</html>